<template>
	<view class="content">
		<view class="module-form">
			<view class="bg-white p20">
				<view class="bm u-flex u-f-justify pb20 mb15 u-f-jsb" style="position: relative;">
					<u-avatar size="120" :src="userInfo.avatar"></u-avatar>
					<view class="u-flex" style="position: relative;">
						<button type="default" open-type="chooseAvatar" @chooseavatar="chooseavatar"
							style="font-size: 30rpx;position: absolute;top:0;bottom: 0;left: 0;right: 0;opacity: 0;z-index: 1;">上传微信头像</button>
						<view class="mr5">更换头像</view>
						<u-icon name="arrow-right" color="#0F1011"></u-icon>
					</view>
					
				</view>
				<view class="bm u-flex pb15 mb15">
					<view class="fz14 c0" style="width: 200rpx;">
						昵称
					</view>

					<view class="cell-item-bd">
						<input class="cell-bd-input" type="nickname" @change="nicknameChange" v-model="userInfo.name" />
					</view>
				</view>

				<view class="bm u-flex  pb15 mb15" style="position: relative;">
					<button class="btn-phone" hover-class="none" size="default" open-type="getPhoneNumber"
						@getphonenumber="loginPhone"></button>
					<view class="fz14 c0" style="width: 200rpx;">
						手机号码
					</view>

					<view class="cell-item-bd">
						<input disabled class="cell-bd-input" v-model="userInfo.mobile" placeholder="请点击授权手机号码" />
					</view>
				</view>

			</view>
		</view>
		<view class="fixed-bottom">
			<view class="btn" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		getPlatform
	} from '@/config/util.js'
	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				pupopShow: false,
				showDate: false,
				genderAttr: ['女', '男', '未知'],
				userInfo: {
					avatarUrl: '',
					birthday: '',
					mobile: '',
					name: '',
					gender: ''
				},
			};
		},
		methods: {
			popupConfirm(e) {
				let idx = e[0]
				this.userInfo.gender = idx
			},
			nicknameChange(e) {
				console.log(e, 111)
				this.userInfo.user_name = e.detail.value;
			},
			nicknameChange(e) {
				console.log(e, 111)
				this.userInfo.nickName = e.detail.value;
			},

			dateConfirm(e) {
				this.userInfo.birthday = `${e.year}-${e.month}-${e.day}`
			},

			chooseavatar(e) {
				console.log(e);

				uni.uploadFile({
					url: this.$config.apiBaseUrl + "api/file/upload", //仅为示例，非真实的接口地址
					filePath: e.detail.avatarUrl,
					fileType: 'image',
					name: 'file',
					header: {

						'Accept': 'application/json',
						'Content-Type': 'application/x-www-form-urlencoded',
						'Authorization': this.$db.get("userToken")
					},
					formData: {
						'file': e.detail.avatarUrl,

					},
					success: (uploadFileRes) => {

						console.log(uploadFileRes.data, 121212)
						this.userInfo.avatar = JSON.parse(uploadFileRes.data).data
					},
				});
			},
			
			async loginPhone(e) {
			
				let phoneInfo = e.detail
				let postData = {
					encryptedData: phoneInfo.encryptedData,
					iv: phoneInfo.iv,
					openId: this.$db.get("openid")
				}
				this.$api.wxPhone(postData, res => {
					if (res.code == 200) {
						this.$api.userUpdateMobile({
							phone: res.data
						}, res => {
							if (res.code == 200) {
								this.getInfo()
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						})
			
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			getInfo(){
					this.$api.memberInfo({}, res => {
						if (res.code==200) {
							this.userInfo = res.data;
						}
					})
				
			},
			submit() {
				// if(!this.userInfo.name || this.userInfo.name=='游客'){
				// 	uni.showToast({
				// 		title: '请完善用户昵称！',
				// 		icon: 'none'
				// 	});
				// 	return
				// }
				this.$api.userUpdate({
					name: this.userInfo.name,
					// phone: this.userInfo.mobile,
					logo: this.userInfo.avatar,
					sex: this.userInfo.sex,
					birthday: this.userInfo.birthday,
				}, res => {
					if (res.code == 200) {
						uni.navigateBack()
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						});
					} else {
						// uni.navigateBack()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			}
		},
		onLoad: function() {
			if (this.$db.get("userToken")) {
				this.getInfo()
			}
		}
	};
</script>

<style lang="scss">
	.user-head {
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		padding: 56rpx 0 0;
	}

	.user-head-img {
		display: block;
		height: 100upx;
		width: 100upx;
		border-radius: 50%;
	}

	.module-form {
		.cell-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 116rpx;
			padding: 0;
			margin: 0;
			width: auto;
		}

		.right-img .cell-item-ft {
			top: 32rpx;
		}

		.right-img .uni-input {
			padding-right: 40rpx;
			text-align: right;
			height: 80rpx;
			line-height: 80rpx;
		}

		.cell-hd-title {
			color: #000;
			font-size: 28rpx;
			color: #383838;
			font-weight: normal;

			span {
				font-size: 24rpx;
				color: #666;
			}
		}

		.cell-item-hd {
			font-size: 26rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #4e4e4e;
			width: 180rpx;
			min-width: 180rpx;
		}

		.cell-item-bd {
			color: #333;
			font-size: 28upx;
			margin: 0;
			width: 100%;
			justify-content: flex-end;
			padding-right: 0 !important;
		}

		.cell-bd-input {
			width: 100%;
			text-align: right;
			padding: 20rpx;
		}

		::v-deep .u-radio__label {
			margin-right: 10rpx !important;
		}

		.input-area {
			background: #f9f9f9;
			border-radius: 16rpx;
			padding: 20rpx 30rpx;
		}
	}

	.btn {
			background: #76BC21;
	}
	
	.btn-phone{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		z-index: 10;
	}
</style>